<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" placeholder="输入本金" class="ipt1" />
    <input type="text" placeholder="输入年限" class="ipt2" />
    <button>点击计算利息与本金的合计</button>
    <input type="text" class="ipt3" />
  </body>
</html>
<script>
  var oIpt1 = document.querySelector(".ipt1");
  var oIpt2 = document.querySelector(".ipt2");
  var oIpt3 = document.querySelector(".ipt3");
  var oBtn = document.querySelector("button");
  oBtn.onclick = function () {
    switch (oIpt2.value) {
      case "1":
        oIpt3.value = oIpt1.value * 0.0063 * 12 * 1 + oIpt1.value;
        break;
      case "2":
        oIpt3.value = oIpt1.value * 0.0066 * 12 * 2 + oIpt1.value;
        break;
      case "3":
        oIpt3.value = oIpt1.value * 0.0069 * 12 * 3 + oIpt1.value;
        break;
      case "5":
        oIpt3.value = oIpt1.value * 0.0075 * 12 * 5 + oIpt1.value;
        break;
      case "8":
        oIpt3.value = oIpt1.value * 0.0084 * 12 * 8 + oIpt1.value;
        break;
      default:
        break;
    }
  };
</script>
